import { useState, useEffect } from "react";
import { Column } from "@ant-design/plots";
import baseUrl from '@/config';

const DemoColumn = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();

    // Set up a polling interval (每600s=10分钟)
    const intervalId = setInterval(asyncFetch, 6000 * 100); // Adjust the interval as needed

    // Clean up the interval when the component unmounts
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  const asyncFetch = () => {
    fetch(
      // "https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json"
      baseUrl + "/sys/zoneBikeSummary/getZoneBikeColumnList"
    )
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log("fetch data failed", error);
      });
  };

  const config = {
    data,
    xField: "zone",
    yField: "value",
    seriesField: "type",
    isGroup: true,
    columnStyle: {
      radius: [20, 20, 0, 0],
    },
  };

  return <Column style={{ height: '99%' }} {...config} />;
};

export default DemoColumn;
